<template>
  <uv-navbar
    :title="pageTitle"
    placeholder
    bg-color="#fff"
    auto-back
    left-icon-color="#757575"
    title-style="color: #000000; font-size: 32rpx"
  >
    <template #right>
      <uv-text text="提交" color="#4EA770" size="28rpx" @click="handleSubmit" />
    </template>
  </uv-navbar>
  <view class="examine">
    <view class="title"> 备注信息 </view>
    <uv-textarea
      v-model="forms.remark"
      placeholder="请输入备注信息"
      border="bottom"
      :placeholder-style="{
        color: '#bdbdbd',
        fontSize: '28rpx',
      }"
    />
  </view>
  <view class="examine" v-if="forms.type == 2">
    <view class="title">
      通知人员 <text>（注：审批完成后，将自动通知到所选人员。）</text>
    </view>
    <view class="user-box">
      <view class="ss-m-y-10 peopleBox ss-m-x-20" v-for="i in chooseList" :key="i">
        <uv-avatar :src="webSrc(i.avatar)" size="80rpx" />
        <uv-icon
          v-if="orderInfo.createBy != i.userId"
          name="close-circle-fill"
          color="#f00"
          size="20"
          class="icon"
          @click="remoreUser(i.userId)"
        />
        <view v-if="orderInfo.createBy == i.userId" class="orignal">创建人</view>
        <view class="label"> {{ i.nickName }} </view>
      </view>
      <view class="ss-m-x-20" @click="onMoreUser">
        <uv-icon
          :name="iconAdd"
          size="80rpx"
          space="26rpx"
          label="更多"
          label-pos="bottom"
          label-size="28rpx"
          label-color="#212121"
        />
      </view>
    </view>
  </view>
  <view class="listImg" v-if="forms.type == 7">
    <view class="ss-m-y-10 ss-m-x-16 ss-flex ss-col-bottom ss-row-between">
      <view class="ss-grey-2"> 上传附件 </view>
      <view class="ss-grey-1 ss-flex ss-col-center" @click="onChangeAvatar">
        选择附件
        <uv-icon name="arrow-right" color="#757575" size="16" />
      </view>
    </view>
    <view class="image-box" v-if="forms.annexUrl.length">
      <view v-for="(url, k) in forms.annexUrl" :key="k" class="image-item">
        <view class="image-del" @click="deletePic(k)">
          <uv-icon name="close" color="#fff" />
        </view>
        <image :src="webSrc(url)" mode="aspectFill" @click="previewImage(k)" />
      </view>
    </view>
  </view>
</template>
<script setup>
import { reactive, ref, computed } from "vue";
import { onLoad, onShow, onBackPress } from "@dcloudio/uni-app";
import { addOrderRecord, getOrderUserList, getOrderDetail } from "@/request/order";
import { commonUpload } from "@/request/common.js";
import { webSrc } from "@/common/mothed.js";
import iconAdd from "@/static/order/icon_add.png";

const forms = reactive({
  workOrderId: "", // 工单id
  remark: "", // 备注信息
  type: "", // 审核类型
  informUserId: [], // 通知人员ID
  annexUrl: [], // 附件
});
const orderInfo = ref({}); // 工单详情
const userList = ref([]); // 人员列表

const pageTitle = computed(() => {
  return [2, 10, 13].includes(forms.type) ? "审批通过" : "完结工单";
});
const chooseList = computed(() => {
  return userList.value.filter((i) => forms.informUserId.includes(i.userId));
});

onLoad((e) => {
  forms.workOrderId = e.id;
  forms.type = parseInt(e.type);
  getUserList();
});

onShow(() => {
  let list = uni.getStorageSync("choosePerson");
  if (list && forms.type == 2) forms.informUserId = list;
  getData();
});

onBackPress(() => {
  uni.removeStorageSync("choosePerson");
});

// 获取工单详情
const getData = () => {
  getOrderDetail(forms.workOrderId).then((res) => {
    if (res.code == 200) {
      orderInfo.value = res.data;
      if (!forms.informUserId.includes(parseInt(orderInfo.value.createBy || 0))) {
        forms.informUserId.unshift(parseInt(orderInfo.value.createBy || 0));
        uni.setStorageSync("choosePerson", forms.informUserId);
      }
    }
  });
};

// 提交工单操作记录
const handleSubmit = () => {
  let data = Object.assign({}, forms);
  data.informUserId = data.informUserId.join(",");
  data.annexUrl = data.annexUrl.join(",");
  addOrderRecord(data).then((res) => {
    if (res.code == 200) {
      uni.removeStorageSync("choosePerson");
      uni.showToast({
        title: "提交成功",
        icon: "success",
        success: () => {
          setTimeout(() => {
            uni.$emit("order");
            uni.navigateBack({
              delta: 1,
            });
          }, 1500);
        },
      });
    }
  });
};

// 更多人员
const onMoreUser = () => {
  uni.navigateTo({
    url: `/pages/Order/addPerson?orderId=${forms.workOrderId}&createBy=${orderInfo.value.createBy}`,
  });
};

// 获取人员列表
const getUserList = () => {
  getOrderUserList(forms.workOrderId).then((res) => {
    if (res.code == 200) {
      userList.value = res.data;
    }
  });
};

// 移除人员
const remoreUser = (userId) => {
  forms.informUserId = forms.informUserId.filter((i) => i != userId);
  uni.setStorageSync("choosePerson", forms.informUserId);
};

//上传附件
function onChangeAvatar() {
  uni.chooseImage({
    count: 9,
    sizeType: ["compressed"],
    success: (image) => {
      image.tempFilePaths.forEach((i) => {
        commonUpload(i).then((res) => {
          if (res.code == 200) {
            forms.annexUrl.push(res.fileName);
          }
        });
      });
    },
    fail: () => {
      uni.showToast({
        title: "获取权限失败",
        icon: "none",
      })
    }
  });
}

// 删除图片
const deletePic = (index) => {
  uni.showModal({
    title: "提示",
    content: "确定是否删除？",
    showCancel: true,
    success: ({ confirm }) => {
      if (confirm) {
        forms.annexUrl.splice(index, 1);
      }
    },
  });
};

// 预览图片
const previewImage = (k) => {
  uni.previewImage({
    urls: forms.annexUrl.map((i) => webSrc(i)),
    current: k,
  });
};
</script>
<style lang="scss" scoped>
@import "@/uni.scss";

.listImg {
  width: 94%;
  margin: 20rpx auto;
  overflow: hidden;

  .image-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
    width: 100%;
    margin-top: 20rpx;
    padding: 0 30rpx;
    box-sizing: border-box;

    .image-item {
      position: relative;
      height: 156rpx;
      overflow: hidden;
      border-radius: 8rpx;
      background: rgba(0, 0, 0, 0.1);

      .image-del {
        position: absolute;
        top: 0;
        right: 0;
        width: 42rpx;
        height: 42rpx;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 0 8rpx 0 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
      }

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.examine {
  padding: 0 30rpx;

  .title {
    font-size: 28rpx;
    color: #757575;
    padding-left: 16rpx;
    margin-top: 20rpx;

    text {
      color: #bdbdbd;
      font-size: 24rpx;
    }
  }

  .user-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 20rpx;
    .peopleBox {
      position: relative;
      display: flex;
      align-items: center;
      flex-direction: column;
      min-width: 100rpx;
      .icon {
        position: absolute;
        left: calc(50% + 30rpx);
        top: -10rpx;
      }
      .orignal {
        position: absolute;
        left: calc(50% - 2rpx);
        top: -10rpx;
        font-size: 18rpx;
        width: 70rpx;
        height: 26rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background-color: #4ea770;
        border-radius: 20rpx;
      }
    }
  }
}
</style>
